<template>
	<view class="search">
		<view class="search-button">
			<view class="search-button-select" @click="clickSearchTypeButton">
				<text>{{searchTypeText}}</text>
				<text class="iconfont icon-arrow-down-filling"></text>
			</view>
			<input
				type="text"
				placeholder="请输入搜索内容..."
				placeholder-style="color:#C0C4CC;"
				v-model="content"/>
			<view class="search-button-submit" @click="clickSearchButton">
				<text class="iconfont icon-sousuo"></text>
			</view>
		</view>
		<view class="search-result">
			共有<text>{{searchResult}}</text>条搜索结果
		</view>
		<template v-if="searchType == 'post'">
			<view class="list-default" v-if="list.length">
				<view
					v-for="(item, index) in list"
					class="for"
					@click="$_to('post/detail?pid=' + item.pid)">
					<!-- 是否匿名判断 -->
					<!-- 是匿名 -->
					<view class="author" v-if="item.isAnonymous">
						<view class="author-avatar">
							<view class="avatar">
								<global-lazy-load-image
									:image="item.author.avatar"
									width="80rpx"
									height="80rpx"
									borderRadius="0">
								</global-lazy-load-image>
							</view>
						</view>
						<view class="author-center">
							<view class="_top">
								<view class="nickname">{{$t('contentAuthorAnonymous')}}</view>
							</view>
							<view class="_bottom">
								<view class="created-time-ago"><text>{{item.createdTimeAgo}}</text></view>
								<view class="_bottom-group" v-if="item.group"><text>来自</text><text>{{item.group.name}}</text></view>
							</view>
						</view>
					</view>
					<!-- 不是匿名 -->
					<view class="author" v-else>
						<view
							class="author-avatar"
							@click.stop="$_to('user/detail?uid=' + item.author.uid)">
							<view
								class="avatar"
								:style="item.author.nicknameColor?'border: 5rpx solid '+item.author.nicknameColor+';':''">
								<global-lazy-load-image
									:image="item.author.avatar"
									width="80rpx"
									height="80rpx"
									borderRadius="0">
								</global-lazy-load-image>
							</view>
							<view
								class="role-name"
								:style="item.author.nicknameColor?'background:'+item.author.nicknameColor+';color:#FFF;':''">{{item.author.roleName[0]}}</view>
						</view>
						<view class="author-center">
							<view class="_top">
								<view class="nickname">{{item.author.nickname}}</view>
								<view class="role-name" :style="item.author.nicknameColor?'color:'+item.author.nicknameColor+';':''"><text>{{item.author.roleName}}</text></view>
							</view>
							<view class="_bottom">
								<view class="created-time-ago"><text>{{item.createdTimeAgo}}</text></view>
								<view class="_bottom-group" v-if="item.group"><text>来自</text><text>{{item.group.name}}</text></view>
							</view>
						</view>
						<view
							class="author-right"
							@click.stop="$_to('user/detail?uid=' + item.author.uid)">
							<view>
								<text class="iconfont icon-add"></text>
								<text>{{$t('detail')}}</text>
							</view>
						</view>
					</view>
					<!-- 帖子标题 -->
					<view class="title" v-if="item.title">{{item.title}}</view>
					<!-- 帖子内容 -->
					<view class="content" :style="item.title?'':'color:#303133;font-size: 32rpx;line-height: 45rpx;'">{{$_filterHtml(item.content)}}</view>
					<!-- 附件 -->
					<public-list-files :item="item.files"></public-list-files>
					<view class="_location" v-if="item.geotag">
						<text class="iconfont icon-dingwei1"></text>
						<text>{{item.geotag.name}}</text>
					</view>
					<!-- 尾部 > 帖子数据 -->
					<view class="post-count">
						<view>
							<text
								class="iconfont icon-good"
								:style="item.interaction.likeStatus?'color: #409EFF;':''"></text>
							<text :style="item.interaction.likeStatus?'color: #409EFF;':''">{{item.likeCount}}</text>
						</view>
						<view>
							<text class="iconfont icon-comment"></text>
							<text>{{item.commentCount}}</text>
						</view>
						<view>
							<text
								class="iconfont icon-favorite"
								:style="item.interaction.followStatus?'color: #409EFF;':''"></text>
							<text :style="item.interaction.followStatus?'color: #409EFF;':''">{{item.followCount}}</text>
						</view>
					</view>
				</view>
				<view
					class="more"
					@click="clickMoreButton">
					{{listPageText}}
				</view>
			</view>
		</template>
		<template v-if="searchType == 'user'">
			<view class="list-user">
				<view
					class="_for"
					v-for="item in list"
					@click="$_to('user/detail?uid=' + item.uid)">
					<view class="_for-avatar">
						<image :src="item.avatar" mode="widthFix"></image>
					</view>
					<view class="_for-nickname-role-name">
						<text>{{item.nickname}}</text>
						<text class="_for-role-name">{{item.roleName}}</text>
					</view>
					<view class="_for-statistic">
						<text>{{item.stats.postPublishCount}}帖子</text>
						<text>{{item.stats.commentPublishCount}}回复</text>
						<text>{{item.stats.followerCount}}粉丝</text>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchTypeText:"帖子",
				searchType:"post",
				content:"",
				list:[],
				listStatus:"loading",
				listPage:2,
				listPageText: this.$t('clickToLoadMore'),
				searchResult:0
			}
		},
		onLoad() {
			uni.request({
				url:this.$_configFile() + "editor.json",
				method:"GET",
				success: (res) => {
					if(!res.data.youranSearch){
						uni.showToast({
							title: '请开启搜索插件',
							duration: 1500,
							icon: 'none'
						});
						setTimeout(()=>{
							uni.navigateBack();
						},1500);
					}
				}
			})
		},
		methods: {
			clickSearchButton(){
				uni.showLoading();
				if(this.searchType == 'post'){
					this.$_request(
						"GET","/api/fresns/v1/search/posts",
						{
							"searchKey":this.content
						},
						(res) => {
							uni.hideLoading();
							this.searchResult = res.data.data.pagination.total;
							this.list = res.data.data.list;
						}
					)
				}
				if(this.searchType == 'user'){
					this.$_request(
						"GET","/api/fresns/v1/search/users",
						{
							"searchKey":this.content
						},
						(res) => {
							uni.hideLoading();
							this.searchResult = res.data.data.pagination.total;
							this.list = res.data.data.list;
						}
					)
				}
			},
			// 点击翻页
			clickMoreButton(){
				if(this.searchType == 'post'){
					if (this.listPageText == this.$t('loading')) { return }
					this.listPageText = this.$t('loading');
					this.$_request(
						"GET","/api/fresns/v1/search/posts",
						{
							"searchKey":this.content,
							"page": this.listPage,
						},
						(res) => {
							if (res.data.data.list.length) {
								this.list = this.list.concat(res.data.data.list);
								this.listPage++
								this.listPageText = this.$t('clickToLoadMore')
							} else {
								this.listPageText = this.$t('listWithoutPage')
							}
						}
					)
				}
			},
			// 点击选择搜索类型
			clickSearchTypeButton(){
				uni.showActionSheet({
					itemList: ['帖子','用户'],
					success: (res) => {
						if(res.tapIndex == 0){
							this.searchTypeText = "帖子";
							this.searchType = "post";
							this.listPage = 2;
						}
						if(res.tapIndex == 1){
							this.searchTypeText = "用户";
							this.searchType = "user";
							this.listPage = 2;
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss">
.search{
	.search-result{
		font-size: 28rpx;
		line-height: 28rpx;
		padding: 25rpx;
		padding-bottom: 0;
		text{
			color: $theme;
			padding: 0 10rpx;
		}
	}
	.search-button{
		display: flex;
		align-items: center;
		margin: 25rpx;
		margin-bottom: 0;
		background: #FFF;
		height: 80rpx;
		padding: 0 0 0 25rpx;
		border-radius: 10rpx;
		overflow: hidden;
		border: 1px solid $border;
		.search-button-select{
			display: flex;
			align-items: center;
			line-height: 28rpx;
			flex-shrink: 0;
			text{
				font-size: 28rpx;
			}
			.iconfont{
				padding-left: 10rpx;
			}
		}
		input{
			flex: 1;
			height: 80rpx;
			text-align: center;
			font-size: 28rpx;
		}
		.search-button-submit{
			width: 80rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: $theme;
			line-height: 40rpx;
			text{
				color: #FFF;
				font-size: 40rpx;
			}
		}
	}
	.list-default{
		padding: 25rpx 25rpx 0 25rpx;
		.for{
			padding: 25rpx;
			background: #FFF;
			margin-bottom: 25rpx;
			.author{
				display: flex;
				align-items: center;
				.author-avatar{
					width: 90rpx;
					height: 90rpx;
					overflow: hidden;
					position: relative;
					flex-shrink: 0;
					.avatar{
						width: 80rpx;
						height: 80rpx;
						overflow: hidden;
						position: absolute;
						left: 0;
						top: 0;
						z-index: 1;
						border: 5rpx solid $background;
						border-radius: 200rpx;
					}
					.role-name{
						width: 30rpx;
						height: 30rpx;
						font-size: 16rpx;
						line-height: 16rpx;
						background: $background;
						position: absolute;
						right: 0;
						bottom: 0;
						z-index: 2;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 200rpx;
						border: 1px solid #FFF;
					}
				}
				.author-center{
					display: flex;
					justify-content: center;
					flex-flow: column;
					flex: 1;
					margin: 0 20rpx;
					._top{
						display: flex;
						align-items: center;
						.nickname{
							font-size: 32rpx;
							line-height: 32rpx;
						}
						.role-name{
							height: 32rpx;
							display: flex;
							align-items: center;
							line-height: 18rpx;
							background: $background;
							padding: 0 5rpx;
							margin-left: 10rpx;
							border-radius: 5rpx;
							text{
								font-size: 18rpx;
							}
						}
					}
					._bottom{
						display: flex;
						padding-top: 15rpx;
						.created-time-ago{
							font-size: 22rpx;
							line-height: 22rpx;
							color: $placeholder;
							flex-shrink: 0;
						}
						._bottom-group{
							display: flex;
							align-items: center;
							line-height: 22rpx;
							margin-left: 10rpx;
							text{
								font-size: 22rpx;
								color: $placeholder;
								padding-right: 5rpx;
							}
						}
					}
				}
				.author-right{
					flex-shrink: 0;
					display: flex;
					align-items: center;
					view{
						box-shadow: 0 0 3rpx $theme;
						line-height: 22rpx;
						padding: 10rpx 15rpx;
						border-radius: 100rpx;
						text{
							font-size: 22rpx;
							color: $theme;
						}
					}
				}
			}
			.title{
				font-size: 32rpx;
				line-height: 32rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				margin-top: 25rpx;
				font-weight: bold;
				
			}
			.content{
				margin-top: 15rpx;
				color: $placeholder;
				font-size: 28rpx;
				line-height: 40rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
			}
			.post-count{
				display: flex;
				align-items: center;
				justify-content:space-between;
				border-top: 1px solid $background;
				padding-top: 25rpx;
				margin-top: 25rpx;
				view{
					display: flex;
					align-items: center;
					line-height: 32rpx;
					text{
						font-size: 28rpx;
						color: $placeholder;
					}
					.iconfont{
						padding-right: 5rpx;
						font-size: 32rpx;
					}
				}
			}
			._location{
				display: flex;
				align-items: center;
				justify-content: flex-end;
				line-height: 22rpx;
				margin-top: 15rpx;
				text{
					font-size: 22rpx;
					color: $placeholder;
				}
			}
		}
		.more{
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 22rpx;
			line-height: 22rpx;
			padding-bottom: 25rpx;
			color: $placeholder;
		}
		._loading{
			background: #FFF;
			padding: 25rpx 25rpx 1rpx 25rpx;
			.skeleton-screen{
				width: 100%;
				height: 50rpx;
				margin-bottom: 25rpx;
			}
		}
	}
	.list-user{
		padding: 25rpx;
		padding-top: 0;
		._for{
			background: #FFF;
			padding: 50rpx 25rpx 25rpx 25rpx;
			margin-top: 25rpx;
			border-radius: 15rpx;
			._for-avatar{
				width: 150rpx;
				height: 150rpx;
				overflow: hidden;
				border-radius: 500rpx;
				margin: auto;
			}
			._for-nickname-role-name{
				text-align: center;
				line-height: 32rpx;
				padding-top: 25rpx;
				text{
					font-size: 32rpx;
				}
				._for-role-name{
					font-size: 22rpx;
					padding-left: 15rpx;
					color: $placeholder;
				}
			}
			._for-statistic{
				text-align: center;
				line-height: 28rpx;
				padding-top: 25rpx;
				text{
					font-size: 28rpx;
					padding: 0 12.5rpx;
					color: $placeholder;
				}
			}
		}
	}
}
</style>
